<template>
  <div class="selectCustom" :style="commpStyle">
    <el-popover
      :placement="placement"
      :width="width"
      :trigger="trigger"
      v-model="popoverModel"
    >
      <!--传入设计界面时-->
      <commonConfigForm
        ref="selectCustomCommonView"
        class="selectCustomCommonView"
        :option="configOption"
        v-model="configForm"
      >
      </commonConfigForm>
      <!-- 构建只读输入框，并添加点击事件 -->
      <div slot="reference" class="el-input el-input--small el-input--suffix" @click="popoverModelClick">
        <input type="text" readonly autocomplete="off" v-model="showValue" :placeholder="placeholder" class="el-input__inner">
        <span class="el-input__suffix">
          <span class="el-input__suffix-inner">
            <i :class="iconUpOrDown ? clickAfterIcon : clickBeforeIcon"></i>
          </span>
        </span>
      </div>
      <!-- <el-input
        slot="reference"
        v-model="showValue"
        :size="size"
        :placeholder="placeholder"
        @click="popoverModelClick()"
        :suffix-icon="iconUpOrDown ? clickAfterIcon : clickBeforeIcon"
      ></el-input> -->
    </el-popover>
  </div>
</template>
<script>
import baseComp from "./baseComp";
import commonConfigForm from "./commonConfigForm";

export default {
  name: "selectCustom",
  extends: baseComp,
  components: { commonConfigForm },
  model: {
    prop: "value",
    event: "selectCustomChange",
  },
  props: {
    value: {
      type: [Object, String, Array],
    },
    // 说明: 出现位置
    // 可选值: top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
    // 类型: String
    placement: {
      type: String,
      default: "bottom",
    },
    // 说明: 宽度
    // 可选值: % 或者 px
    // 类型: String, Number
    width: {
      type: [String, Number],
      default: 600,
    },
    // 说明: 触发方式
    // 可选值: % 或者 px
    // 类型: click/focus/hover/manual
    trigger: {
      type: String,
      default: () => "click",
    },
    size: {
      type: String,
      default: "small",
    },
    // input框提示信息
    placeholder: {
      type: String,
    },
    // clickBeforeIcon 点击前的图标
    clickBeforeIcon: {
      type: String,
      default: "el-icon-arrow-down",
    },
    // clickAfterIcon 点击后的图标
    clickAfterIcon: {
      type: String,
      default: "el-icon-arrow-up",
    },
    // 是否只读
    readOnly: {
      type: Boolean,
      default: true,
    },
    // 是否禁用
    disable: {
      type: Boolean,
      default: true,
    },
    // 设计界面内容填充参数
    designObjectParam: {
      type: Object,
      default: () => {
        return {
          op: "",
          url: "/uavMesh/operation/getOperationUiContentByProcessKey",
          dicFormatter: (res) => {
            return res;
          },
        };
      },
    },
    //
  },
  watch: {
    // 监听设计界面参数信息
    designObjectParam: {
      handler(v) {
        if (v) {
          this.designObject = v;
          // if (v.op) {
            // this.queryStrategyUi(v.op);
          // }
        }
      },
      immediate: true,
      deep: true,
    },
    value: {
      handler(val) {
        if (val && !this.isEmptyObject(val)) {
          let dicFormatter = this.designObjectParam.dicFormatter;
          if(dicFormatter){
            if(typeof dicFormatter != 'function'){
              dicFormatter = eval(dicFormatter);
            }
            this.showValue = dicFormatter(val);;
          }
          // this.configForm = val;
        }
      },
      deep: true,
      immediate: true,
    },
    configForm: {
      handler(val) {
        if (val && !this.isEmptyObject(val)) {
          let dicFormatter = this.designObjectParam.dicFormatter;
          if(dicFormatter){
            if(typeof dicFormatter != 'function'){
              dicFormatter = eval(dicFormatter);
            }
            this.showValue = dicFormatter(val);;
          }
          this.$emit("selectCustomChange", val);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 设计对象的参数信息
      designObject: {},
      configOption: {},
      configForm: {},
      // input框中显示值
      showValue: "",
      iconUpOrDown: false,
      popoverModel: false,
    };
  },

  mounted() {},
  methods: {
    /**
     * 模态框加载点击事件
     */
    popoverModelClick(){
      if(!this.popoverModel){
        this.iconUpOrDown = true;
        this.queryStrategyUi(this.designObject.op);
      }else{
        this.iconUpOrDown = false;
      }
    },
    /**
     *
     * @param op 查询界面参数，操作op标识名
     */
    queryStrategyUi(op) {
      if (op) {
        this.$myAxios
          .post(this.designObject.url, { processKey: op })
          .then((res) => {
            let uiContent = res.data.data.design.uiContent;
            uiContent.pageName = this.designObject.op;
            this.$set(this, "configOption", uiContent);
            this.$set(this, 'configForm', this.value);
            //给值添加随机数，能够让值发生变化，使其子组件能够监听值的变化。
            if(Array.isArray(this.configForm)){
              this.configForm.push({})
            }else{
              for (const key in this.configForm) {
                this.addRandomValue(this.configForm[key]);
              }
            }
          });
      }
    },
    addRandomValue(item){
      if(!item){
        return;
      }
      if(Array.isArray(item)){
        for (const iterator of item) {
          this.addRandomValue(iterator);
        }
      }else if(typeof item == 'string' || typeof item == 'number'){
        console.log('当前值为字符串或则数值，不进行值修改。');
      }else{
        this.$set(item, 'random', Math.random());
      }
    }
  },
};
</script>
<style less="lang" scoped>
/deep/.el-input__suffix {
  right: 10px;
}
</style>

